import React from "react";
import { Tooltip, Empty, Tag } from "antd";
import { Scrollbars } from "react-custom-scrollbars";
import moment from "moment";

const BillList = ({ title, data , isIncome }) => {
  return (
    <div className="bill-list">
      <div className="bill-list_header">
        <h3 className="bill_title">{title}</h3>
      </div>
      <ul className="bill-list-content">
        <Scrollbars autoHide>
          {data.length > 0 ? (
            data.map(bill => (
              <Tooltip
                key={bill._id}
                placement="right"
                title={bill.mark}
                className="bill-tip"
              >
                <li className="bill-one">
                  <Tag color={isIncome ? "cyan" : "magenta"}>{bill.classid}</Tag>
                  <span className="bill-money">{bill.money}</span>
                  <span className="bill-money_dan">{bill.unit}</span>
                  <span className="bill-time">
                    {moment(bill.createdTime).format("LL")}
                  </span>
                </li>
              </Tooltip>
            ))
          ) : (
            <Empty />
          )}
        </Scrollbars>
      </ul>
    </div>
  );
};

export default BillList;
